<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <el-form
        :model="formData"
        label-width="100px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item prop="title" label="标题:">
              <el-input
                v-model.trim="formData.title"
                placeholder="请输入标题"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="about" label="简介:">
              <el-input
                v-model.trim="formData.about"
                placeholder="请输入简介"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="sort" label="排序:">
              <el-input
                v-model.trim="formData.sort"
                placeholder="请输入排序"
                class="proInputWidth"
                clearable
                filterable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="menuId" label="适用页面:">
              <el-select
                clearable
                filterable
                placeholder="请选择"
                class="proInputWidth"
                v-model="formData.menuId"
              >
                <el-option
                  v-for="item in menuIds"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  {{ item.name
                  }}<span v-show="item.remark">--{{ item.remark }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="isShow" label="是否显示:">
              <el-select
                clearable
                filterable
                placeholder="请选择"
                class="proInputWidth"
                v-model="formData.isShow"
              >
                <el-option
                  v-for="item in visibleData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="col-position">
            <el-form-item prop="content" label="内容:">
              <!-- 富文本编辑器 -->
              <UE
                :id="id"
                :config="config"
                ref="ue"
                class="ueditorBox"
                v-on:ready="ready"
                v-bind:value="defaultMsg"
                v-on:input="input"
              ></UE>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 5px">
          <el-col :span="20">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                type="primary"
                @click="saveHelp"
                v-show="isShowSave"
                :loading="isSaveLoading"
                >保 存</el-button
              >
              <el-button @click="goBackList" class="commonBut">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import UE from '@/components/publicCom/ueditor.vue'
import common from '../../kits/common'
export default {
  name: 'helpEdit',
  components: {
    UE,
  },
  data() {
    var checkContent = (rule, value, callback) => {
      var that = this

      setTimeout(function () {
        if (!that.$refs.ue.getUEContent()) {
          return callback(new Error('请添加帮助内容'))
        } else {
          // if(that.$refs.ue.getUEContent().length>50){
          //     return callback(new Error('帮助内容不能大于50个字符'));
          // }else {
          callback()
          // }
        }
      }, 1000)
    }
    return {
      titleText: '添加操作说明',
      back: true,
      menuIds: [],
      visibleData: [],
      editStatus: '',
      isSaveLoading: false,
      clientType: '',
      formData: {
        id: '',
        title: '',
        about: '',
        sort: '',
        isShow: '',
        menuId: '',
        content: '',
        clientType: '',
      },
      formRules: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 10,
            message: '最长允许输入10个字',
            trigger: 'blur',
          },
        ],
        about: [
          {
            required: true,
            message: '简介不能为空',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 50,
            message: '最长允许输入50个字',
            trigger: 'blur',
          },
        ],
        sort: [
          {
            required: true,
            message: '排序不能为空',
            trigger: 'blur',
          },
          {
            validator(rule, value, callback) {
              var reg = /^[1-9][0-9]*$/
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正整数'))
              }
            },
            trigger: 'blur',
          },
        ],
        menuId: [
          {
            required: true,
            message: '适用页面不能为空',
            trigger: 'blur',
          },
        ],
        isShow: [
          {
            required: true,
            message: '是否显示不能为空',
            trigger: 'blur',
          },
        ],
        content: [
          {
            required: true,
            validator: checkContent,
            trigger: 'blur',
          },
        ],
      },
      // 初始化Ueditor配置参数
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300,
        autoHeightEnabled: false, //高度自适应
        wordCount: false, //是否开启字数统计
        enableAutoSave: false, //自动保存功能
        elementPathEnabled: false,
        toolbars: [
          [
            '|',
            'undo',
            'redo',
            '|',
            'bold',
            'italic',
            'underline',
            'fontborder',
            'removeformat',
            'pasteplain',
            '|',
            'forecolor',
            'backcolor',
            'insertorderedlist',
            'insertunorderedlist',
            'cleardoc',
            '|',
            'customstyle',
            'paragraph',
            'fontfamily',
            'fontsize',
            '|',
            'indent',
            '|',
            'justifyleft',
            'justifycenter',
            'justifyright',
            'justifyjustify',
            '|',
            'link',
            'unlink',
            '|',
            'horizontal',
            '|',
            //增加图片上传
            'simpleupload',
            'insertimage',
            '|',
            'preview',
            'searchreplace',
            'drafts',
          ],
        ],
        imageScaleEnabled: false,
      },
      // 不同编辑器必须不同的id
      id: 'containerHelp',
      content: '',
      defaultMsg: '', //富文本编辑器初始数据
      isShowSave: '',
    }
  },
  computed: {},
  created() {
    this.editStatus = this.$route.query.editStatus
    this.clientType = this.$route.query.clientType
    this.formData.clientType = this.clientType
    this.getApplyPageData()
    this.getVisibleData()
    if (this.editStatus == 'add') {
      this.titleText = '添加操作说明'
    } else {
      this.titleText = '编辑操作说明'
      let helpId = this.$route.query.helpId
      this.getHelpInfo(helpId)
    }
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('helpSet:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('helpSet:update') > -1
  },
  mounted() {},
  methods: {
    goBackList() {
      this.$router.push('/home/help/helpTab')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/help/helpTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getContent() {
      this.content = this.$refs.ue.getUEContent()
    },
    saveHelp() {
      this.isSaveLoading = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.submitFormHelp()
        } else {
          this.isSaveLoading = false
          return false
        }
      })
    },
    submitFormHelp() {
      let url = ''
      if ('add' == this.editStatus) {
        url = 'api-m/help/add'
      } else {
        url = 'api-m/help/update'
      }
      this.formData.content = this.$refs.ue.getUEContent()
      this.axios({
        method: 'post',
        url: url,
        data: this.formData,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.isSaveLoading = false
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            // this.goBackList();
            //刷新列表
            this.$router.push('/home/help/helpTab')
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/help/helpTab',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    getApplyPageData() {
      this.axios({
        method: 'post',
        url: 'api-m/menus/child',
      })
        .then((response) => {
          this.menuIds = response.data
        })
        .catch((response) => {})
    },
    getVisibleData() {
      this.axios({
        method: 'post',
        url: 'api-m/help/show',
      })
        .then((response) => {
          this.visibleData = response.data
        })
        .catch((response) => {})
    },
    getHelpInfo(helpId) {
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          helpId: helpId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$refs['formData'].resetFields()
              this.formData.id = response.data.result.id
              this.formData.title = response.data.result.title
              this.formData.about = response.data.result.about
              this.formData.sort = response.data.result.sort
              this.formData.isShow =
                response.data.result.isShow == '是' ? 'YES' : 'NO'
              this.formData.menuId = response.data.result.menuId
              this.defaultMsg = response.data.result.content
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
            this.isAdd = false
          }
        )
        .catch((error) => {})
    },
    ready() {
      // 初始化成功
    },
    input(obj) {
      // 编辑器内容有变动，具体处理自行修改
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
    },
    // 获取子组件上传成功后的值
    getData(data) {
      this.upLoadFile.push(data)
    },
    successCallBack() {},
    errorCallBack() {},
  },
}
</script>
<style scoped lang="less">
.mainCon /deep/ .ueditorBox {
  line-height: 20px;
}
.mainCon {
  padding: 24px;
}
.notice {
  color: #666;
  // margin-top: 40px;
  // line-height: 25px;
}

.content /deep/ #containerHelp /deep/ .edui-default .edui-editor-breadcrumb {
  display: none;
}
.upLoadDom:hover {
  cursor: pointer;
}
.mainCon {
  top: 198px;
}
.proInputWidth {
  width: 500px;
}
</style>
